<template>
	<!--
	    author: 李文昊
		container-par:段落组件总包裹
		container-paragraph：标题总包裹
		container-paragraph-H:标题包裹
		container-paragraph-H1:标题
		container-paragraph-p:段落总包裹
		container-paragraph-model:段落包裹
	-->
		<view class="container-par">
			<view class="container-paragraph">
				<view class="container-paragraph-H">
					<text v-html="title" class="container-paragraph-H1">{{title}}</text>
				</view>
			</view>
			<view class="container-paragraph-p">
				<view class="container-paragraph-model">
					<view v-for="(item,index) in PList" :key="index" v-html="item.value">{{item.value}}</view>
				</view>
			</view>
		</view>
</template>

<script>
	/**
	 * author: 李文昊
	 * title:标题 
	 * PList:内容
	 */
	export default {
		props: {
			title: String,
			PList: Array
		}
	}
</script>

<style>
	.container-par {
		width: 100%;
	}

	.container-paragraph {
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.container-paragraph-H {
		width: 90%;
		line-height: 64rpx;
	}

	.container-paragraph-H1 {
		font-size: 32rpx;
		font-weight: 600;
		font-family: '微软雅黑';
	}

	.container-paragraph-p {
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.container-paragraph-model {
		width: 90%;
		line-height: 64rpx;
	}

	.container-paragraph-model view {
		font-size: 28rpx;
		font-family: '微软雅黑';
		margin-bottom: 40rpx;
		text-align: justify;
		/*通过增加或减少字或字母之间的空格对齐文本*/
		text-justify: newspaper;
		/*允许在单词内换行*/
		word-break: break-all;
		/* 允许存在换行符,其他正常显示 */
		white-space: pre-line;
	}
</style>
